<template>
  <div class="HotList">
    <div class="HotLTitle">热门列表</div>
    <div class="HotLConter" :key="index" v-for="(item, index) in list">
      <a :href="item.src">
        <div class="HotLConterTitle">{{ item.title }}</div>
        <div class="Tconter">
          {{ item.conter }}
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "高等数学",
          src: "#/articlescolumns",
          conter:
            "高等数学是指相对于初等数学和中等数学而言，数学高等数学是指相对于初等数学和中等数学而言，数学",
        },
        {
          title: "高等数学1",
          src: "#/articlescolumns",
          conter:
            "高等数学是指相对于初等数学和中等数学而言，数学高等数学是指相对于初等数学和中等数学而言，数学",
        },
        {
          title: "高等数学2",
          src: "#/articlescolumns",
          conter:
            "高等数学是指相对于初等数学和中等数学而言，数学高等数学是指相对于初等数学和中等数学而言，数学",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
}
.HotList {
  width: 288px;
  height: 360px;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 20px;
}
.HotList:hover {
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
}
.HotLTitle {
  color: #707070;
  font-size: 20px;
  padding: 22px;
  border-bottom: 1px solid #f0f2f5;
}
.HotLConter {
  font-size: 14px;
  color: #000;
  padding: 22px 22px 0;
}
.HotLConterTitle {
  color: #000;
}
.Tconter {
  margin-top: 10px;
  color: #707070bd;
  border-bottom: 1px solid #f0f2f5;
  // 文本超出三行变小点
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
